// import React from 'react'

// export default function Charts() {
//   return (
//     <>
//       折线图
//     </>
//   )
// }
import React from 'react';
import F2Canvas from './F2Canvas/F2Canvas';
import { Axis, Chart, Line, Tooltip, PointGuide, Area } from '@antv/f2';

export default function Charts() {

  const data = [{ date: '2021-07-18', score: '26' }, { date: '2022-07-18', score: '27' }]
  const pointRecords = [{ date: '2021-07-18', score: '26' }]//该点的样式为下面设置的style

  return (
    <>
      <F2Canvas id='demo'>
        <Chart data={data}>
          {/* //x轴 */}
          <Axis field='date'></Axis> 
          {/* //y轴 */}
          <Axis field='score'></Axis>
          {/* //折线图 */}
          <Line x='date' y='score' shape='smooth' /*曲线是否平滑*/></Line>
          <PointGuide records={pointRecords}
          // //标记点
            style={{ fill: '#fff', lineWidth: 2, stroke: '#F1825E' }}></PointGuide>
            {/* //手指移到对应的点时的提示框 */}
          <Tooltip></Tooltip>
        </Chart>
      </F2Canvas>

    </>
  )
}